<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
<head>
    <head th:include="common/common_head :: commonHead('权限管理')"></head>
</head>
<body>
<div class="x-body">
    <form class="layui-form layui-form-pane" style="margin-left: 20px;">
        <div style="width:100%;height:500px;overflow: auto;">
            <div class="layui-form-item">
                <fieldset class="layui-elem-field layui-field-title" style="margin-top: 10px;">
                    <legend style="font-size:16px;">基础信息</legend>
                </fieldset>
            </div>
            <div style="margin-left:25%">
                <div class="layui-form-item">
                    <label class="layui-form-label">
                        <span class="x-red">*</span>类型
                    </label>
                    <div class="layui-input-block" style="width:190px;">
                        <input type="radio" name="typeNode" value="03" title="菜单"
                               th:attr="checked=${(permission?.typeNode == null or permission?.typeNode == '03') ? 'true' : 'false'}"/>
                        <input type="radio" name="typeNode" value="04" title="功能" th:attr="checked=${(permission?.typeNode == '04') ? 'true' : 'false'}" />
                    </div>
                </div>
                <div class="layui-form-item" id="pDiv">
                    <label for="parentName" class="layui-form-label">
                        父级菜单
                    </label>
                    <div class="layui-input-inline">
                        <input type="hidden" name="pid" id="pid" th:value="${permission?.pid}"/>
                        <input type="hidden" name="nodeId" id="nodeId"  th:value="${nodeId}"/>
                        <input type="text" id="parentName" onclick="showTree();"  class="layui-input"
                               lay-verify="parentName" style="width: 300px;" th:value="${permission?.parentName}"/>
                    </div>
                    <div id="treeNode"
                         style="display:none; position: absolute;z-index:1000;background-color: white;">
                        <div id="tree"></div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label for="nameNode" class="layui-form-label">
                        <span class="x-red">*</span>名称
                    </label>
                    <div class="layui-input-inline">
                        <input type="text" id="nameNode" name="nameNode" lay-verify="nameNode"
                               autocomplete="off" class="layui-input" style="width: 300px;" th:value="${permission?.nameNode}"/>
                    </div>
                    <div id="ms" class="layui-form-mid layui-word-aux">
                        <span class="x-red">*</span><span id="ums">必须填写</span>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label for="nodeUrl" class="layui-form-label">
                        url
                    </label>
                    <div class="layui-input-inline">
                        <input type="text" id="nodeUrl" name="nodeUrl" lay-verify="nodeUrl" autocomplete="off"
                               class="layui-input" style="width: 300px;" th:value="${permission?.nodeUrl}"/>
                    </div>
                </div>
                <div class="layui-form-item">

                    <label for="nodeCode" class="layui-form-label">
                        <span class="x-red">*</span>权限
                    </label>
                    <div class="layui-input-inline">
                        <input type="text" id="nodeCode" name="nodeCode" lay-verify="nodeCode"
                               autocomplete="off" class="layui-input" style="width: 300px;" th:value="${permission?.nodeCode}"/>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label for="icon" class="layui-form-label">
                        图标
                    </label>
                    <div class="layui-input-inline">
                        <div style="margin-left: 20px;margin-top:5px">
                            <ul>
                                <li style="display: inline-block;width: 50px;" id="menu-icon"><i class="layui-icon" id="icon" style="font-size: 25px;"
                                                      th:text="${permission?.icon}"></i>
                                </li>
                                <li style="display: inline-block;"><i class="layui-btn layui-btn-primary layui-btn-sm" id="select_icon">选择图标</i>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label for="status" class="layui-form-label">
                        <span class="x-red">*</span>状态
                    </label>
                    <div class="layui-input-inline">
                        <input type="checkbox" name="status" id="status" lay-skin="switch"
                               lay-text="启用|停用" lay-filter="statusDemo"
                               th:attr="checked=${(permission?.isIndex == null or permission?.isIndex == 1) ? 'true' : 'false'}"/>
                    </div>
                </div>
                <!--<div class="layui-form-item">
                    <label for="nodeSort" class="layui-form-label">
                        <span class="x-red">*</span>序号
                    </label>
                    <div class="layui-input-inline">
                        <input type="orderNum" id="nodeSort" name="nodeSort" lay-verify="nodeSort"
                               autocomplete="off" class="layui-input"/>
                    </div>
                </div>-->
                <div style="height: 60px"></div>
            </div>
        </div>
        <span th:if="${param.detail == null}">
            <div style="width: 100%;height: 55px;background-color: white;border-top:1px solid #e6e6e6;
      position: fixed;bottom: 1px;margin-left:-20px;">
                <div class="layui-form-item" style=" float: right;margin-right: 30px;margin-top: 8px">
                    <span sec:authorize-expr="hasAnyAuthority('sys.menu.save')">
                        <button class="layui-btn layui-btn-normal" lay-filter="add" lay-submit="">
                            保存
                        </button>
                        <button class="layui-btn layui-btn-primary" id="close">
                            取消
                        </button>
                    </span>
                </div>
            </div>
        </span>
    </form>
</div>
<script th:inline="javascript">/*<![CDATA[*/
    layui.use(['form', 'layer'], function () {
        $ = layui.jquery;
        var form = layui.form
                , layer = layui.layer, menus = [];
        var urlPermission = /*[[@{/system/permission/list(type=page)}]]*/ "/system/permission/list?type=page";
        jQuery.ajax({url: urlPermission, async: false, type: 'post', dataType:"json",
            success: function (result) {
                menus = treeStructure.getTreeStructureNodes({items:result.data});
            }
        });
        layui.tree({
            elem: '#tree',
            nodes:menus
            , click: function (node) {
                if (node.typeNode == '04') {
                    layer.msg('请勿选择功能', {icon: 5, anim: 6});
                    return false;
                }
                $('#pid').val(node.nodeId);
                $('#parentName').val(node.nameNode);
                hideMenu();
            }
        });
        $('#select_icon').click(function () {
            var iconUrl = /*[[@{/static/plugin/html/icon.html}]]*/ "/static/plugin/html/icon.html";
            parent.layer.open({
                id: 'icon',
                type: 2,
                area: ['800px', '600px'],
                shade: 0.4,
                zIndex: layer.zIndex,
                title: '图标',
                content: iconUrl
            });
        });
        var pName = $("#parentName");
        //自定义验证规则
        form.verify({
            parentName : function(v){
                var types = document.getElementsByName("typeNode"), typeNode;
                for(var n in types){
                    if(types[n].checked){
                        typeNode = types[n].value;
                        break;
                    }
                }
                if (typeNode =='04' && v.trim() == '') {
                    return '父级菜单不能为空';
                }
            },
            nameNode: function (v) {
                if (v.trim() == '') {
                    return '名称不能为空';
                }
            }
            , nodeUrl: function (v) {
                if (pName.val() && v.trim() == '') {
                    return 'url不能为空';
                }
            }
            , nodeCode: function (v) {
                if (pName.val() && v.trim() == '') {
                    return '权限不能为空';
                }
            }
            //, nodeSort: [/^[0-9]*[1-9][0-9]*$/, '请填写序号(正整数)']
        });

        $('#close').click(function () {
            var index = parent.layer.getFrameIndex(window.name);
            parent.layer.close(index);
        });
        //监听提交
        form.on('submit(add)', function (data) {
            data.field['icon'] = $('#icon').text();
            if(data.field.status == 'on'){
                data.field.isIndex = '1';
            }else {
                data.field.isIndex = '0';
            }
            var url = /*[[@{/system/permission/savePermiss}]]*/ "/system/permission/savePermiss";
            $.ajax({
                url: url,
                type: 'post',
                data: data.field,
                async: false, dataType: "json", traditional: true,
                success: function (data) {
                    console.info(data.msg);
                    var index = parent.layer.getFrameIndex(window.name);
                    window.top.layer.msg(data.msg, {icon: 6, offset: 'rb', area: ['120px', '80px'], anim: 2});
                    parent.layer.close(index);
                    parent.location.replace(parent.location.href);
                }, error: function () {
                    var index = parent.layer.getFrameIndex(window.name);
                    window.top.layer.msg('请求失败', {icon: 5, offset: 'rb', area: ['120px', '80px'], anim: 2});
                    parent.layer.close(index);
                }
            });
            return false;
        });
        form.render();
    });

    function showTree() {
        var p = $('#parentName');
        var cityObj = p;
        var cityOffset = p.offset();
        var width = p.css('width');
        $('#treeNode').css({
            left: cityOffset.left + 'px',
            top: cityOffset.top + cityObj.outerHeight() + 'px',
            width: width,
            border: '1px solid #e6e6e6'
        }).slideDown('fast');
        $('body').bind('mousedown', onBodyDown);
        $('#treeNode').css('display', 'inline');
    }
    function hideMenu() {
        $('#treeNode').fadeOut('fast');
        $('body').unbind('blur', onBodyDown);
    }
    function onBodyDown(event) {
        if (!( event.target.id == 'treeNode' || $(event.target).parents('#treeNode').length > 0)) {
            hideMenu();
        }
    }
/*]]>*/</script>
</body>
</html>